<template>
  <div class="month-article-container">
    <div
      class="month-wrap"
      v-for="m in months"
      :key="m.id"
    >
      <div class="month-header">
        <LineComponent
          color="#999"
          margin="0 0 0 0"
          offsetY="7px"
        />
        <h3> {{m.month}}月 </h3>
        <LineComponent
          color="#999"
          margin="0 0px 0 0"
          offsetY="7px"
        />
      </div>
      <div class="article-wrap">
        <MonthArticle
          v-for="item in m.articles"
          :key="item.id"
          :cover="item.cover"
          :date="item.date"
          @select="selectedDateArticle"
        ></MonthArticle>
      </div>
    </div>
    <wd-loading
      color="#000000"
      v-if="loading"
      class="loading"
    ></wd-loading>
    <wd-infinite-load
      ref="infinite"
      v-if="months.length"
      @loadmore="loadmore"
      :loading="refresh"
    ></wd-infinite-load>
  </div>
</template>

<script>
import MonthArticle from "./MonthArticle";
import LineComponent from "../../components/LineComponent";
import { debounce } from "lodash-es";
export default {
  name: "MonthArticleView",
  components: {
    LineComponent,
    MonthArticle,
  },
  data() {
    return {
      months: [],
      loading: true,
      currentDate: 0, //记录当前日期
      refresh: false,
    };
  },
  computed: {
    currentMonth() {
      let currentMonth = this.$route.query.month;
      if (!currentMonth) {
        currentMonth = new Date().getMonth() + 1;
      }
      return currentMonth;
    },
  },
  watch: {
    "$router.query.date"(val) {
      this.currentDate = val;
    },
  },
  created() {
    this.getMonthArticles = debounce(this.getMonthArticles);
    this.getMonthArticles(this.currentDate);
  },
  mounted() {
    // this.getCurrentMonthArticles();
  },

  methods: {
    getMonthArticles(date) {
      this.refresh = true;
      let month = this.currentMonth;
      // if (month == "") {
      //   month = new Date().getMonth() + 1;
      // }
      if (date) {
        month = new Date(date).getMonth() + 1;
      }
      this.$axios(`https://apis.netstart.cn/one/feeds/list/${date}`)
        .then(({ data }) => {
          // console.log(data.data);
          this.months = [
            ...this.months,
            {
              id: date,
              month: month,
              articles: data.data,
            },
          ];
          this.$nextTick(() => {
            this.currentDate = date;
            this.loading = false;
            this.refresh = false;
          });
        })
        .catch(() => this.$refs.infinite.loadEnd());
    },

    loadmore() {
      let d = this.currentDate ? new Date(this.currentDate) : new Date();
      // let prevMonth = d.getMonth();
      // if (prevMonth < 0) {
      //   d.setFullYear(d.getFullYear() - 1);
      //   d.setMonth(11);
      // } else {
      //   d.setMonth(prevMonth);
      // }
      d.setMonth(d.getMonth() - 1);
      let m = d.getMonth() + 1;

      m = m >= 10 ? m : "0" + m;

      let date = d.getFullYear() + "-" + m + "-" + "01";

      this.getMonthArticles(date);
    },
    selectedDateArticle(date) {
      this.$router.replace({ path: `/home/${date}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.month-article-container {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 50px;
  width: 100vw;
  overflow: auto;
  padding: 0 10px;
  background-color: white;
  box-sizing: border-box;

  .month-header {
    display: flex;
    justify-content: center;

    h3 {
      margin: 0 10px;
      color: #bbb;
    }
  }
  .article-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin: 20px 0;
  }
  .loading {
    margin: 20px auto;
  }
}
</style>